<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音0422</title>
    <style type="text/css">
    body{padding:0;margin: 0;}
    .background{width: 100%;height: 100%;position: absolute;background-color: aquamarine;}
    .top{width: 70%;background-color:black;position: absolute;top: 0;right:5%;height: 100px;}
    .ul-nav{display: flex;flex-flow: row nowrap;justify-content: space-around;}
    .ul-nav>li{width: 12%;height: 100px;text-align: center;}
    .ul-nav li>a{
                color: #fff;
                text-shadow: 0 1px 2px rgba(0,0,0,.4);
                vertical-align: middle;
                text-decoration: none;
                font-size: 16px;
                line-height: 40px;
            }
            .unmute { background-image: url("unmute.png") ; }

            .mute { background-image: url("mute.png") ; }
            .btn {
                width: 22px ; height: 22px ;
                background-size: 22px 22px ;
                margin-top: 8px;}
                .menu{
                display: none;
                width: 96px;
                padding: 8px 0;
                box-sizing: border-box;
                box-shadow: 0 0 8px rgba(0,0,0,.16), 0 0 2px rgba(0,0,0,.12);
                border-radius: 4px;
                background-color: white;

            }
            .menu>a{
                width: 100%;
                height: 40px;
                font-size: 15px;
                line-height: 40px;
                text-align: center;
                display: block;
                color: rgba(0,0,0,.9);
                text-decoration: none;
            }
            .sub{
                display: inline-block;
                content: '';
                width: 8px;
                height: 8px;
                background-image: url("subtract_67c835d.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 4px;
            }
            .menu>a:hover{background-color: #C9C9C9}
            .ul-nav .item{position: relative}
            .hover{position: relative}
            .hover .menu{position: absolute;top:40px;right: 2px}
            .hover:hover .menu{display: block}
            .top-logo{position: absolute; top: 0;left: 5%;width: 10%;height: 100px;background-color: black;}
            .bottom{position: absolute;bottom:10%;width: 60%;left: 20%;height: 50px;background-color: black;}
            .foot{display: flex;flex-flow: row nowrap;justify-content: space-around;}
            .bottom ul li>a{text-decoration: none;color: #fff;font-size: 16px;display: inline-block;}
           .bottom ul>li{width: 16%;}
    </style>
</head>
<body>
    <div class="background">
        <div class="top-logo">
            <a href="">
                <img src="logo.png" style="height: 45px; margin-top: 10px;">
            </a>
        </div>
        <div class="top">
            <ul class="ul-nav" style="list-style: none;">
                <li class="item"><a href="https://creator.douyin.com">创作服务平台</a></li>
                <li class="item"><a href="https://open.douyin.com">开放平台</a></li>
                <li class="item hover"><a>系列产品</a><span class="sub"></span><div class="menu"><a href="https://www.huoshanzhibo.com/">抖音火山版</a> <a href="https://lv.ulikecam.com/">剪映</a> <a href="https://www.duoshanapp.com/">多闪</a></div></li>
                <li class="item hover"><a>抖音直播</a><span class="sub"></span><div class="menu"><a href="https://union.bytedance.com/open/">直播机构入驻</a></div></li>
                <li class="item hover"><a>合作入驻</a><span class="sub"></span><div class="menu"><a href="https://www.douyin.com/mcn/">MCN入驻</a> <a href="https://www.douyin.com/platform/effect">抖音特效师</a> <a href="https://musician.douyin.com">抖音音乐人</a> <a href="https://www.douyin.com/certification/agency/enter/">社会机构入驻</a></div></li>
                <li class="item hover"><a>企业合作</a><span class="sub"></span><div class="menu"><a href="https://e.douyin.com">企业服务平台</a> <a href="https://renzheng.douyin.com/api/welcome/?fiji_source=douyin">企业认证</a> <a href="https://www.douyin.com/resource/douyin?source=dou">广告投放</a></div></li>
                <li class="item"><a href="/aboutus/">联系我们</a></li>
                <li class="item"><div class="btn unmute"></div></li>
            </ul>
        </div>
        <div class="bottom">
            <ul class="foot" style="list-style: none;">
                <li class="foot-item"><a href="">音乐</a></li>
                <li class="foot-item"><a href="">用户服务协议</a></li>
                <li class="foot-item"><a href="">隐私政策</a></li>
                <li class="foot-item"><a href="">账号找回</a></li>
                <li class="foot-item"><a href="">广告投放</a></li>
                <li class="foot-item"><a href="">营业执照</a></li>
            </ul>
        </div>
    </div>
</body>
</html>
